<template>
    <div>
        <div class="head-title">
            <span style="margin-right: 5px;color: #2d8cf0">
                <i class="bk-icon icon-pc"></i>
            </span>
            <span>首页</span>
        </div>
        <div class="head-search">
            <div style="width: 300px;">
                <bk-input :clearable="true" v-model="value" placeholder="请输⼊搜索内容"></bk-input>
            </div>
            <div>
                <bk-button :theme="'primary'" class="mr10">搜索</bk-button>
            </div>
        </div>
        <div class="message-area">
            <div class="message-area-title">
                <span><i class="bk-icon icon-dialogue"></i>消息列表</span>
                <bk-switcher v-model="tableShow" theme="primary" @click="changeStatus()"></bk-switcher>
            </div>
            <div class="message-list">
                <div v-if="tableShow">
                    <bk-table :data="data" :size="size" :show-header="false" ext-cls="table-list">
                        <bk-table-column label="内容" prop="content"></bk-table-column>
                        <bk-table-column label="状态" prop="status" width="30">
                            <template slot-scope="props">
                                <div v-if="props.row.status === 'success'" style="color: green">
                                    <i class="bk-icon icon-check-circle-shape"></i>
                                </div>
                                <div v-else style="color:red;">
                                    <i class="bk-icon icon-close-circle-shape"></i>
                                </div>
                            </template>
                        </bk-table-column>
                        <bk-table-column label="详情" width="50">
                            <template slot-scope="props">
                                <div v-if="props.row.detail.length > 0">
                                    <i class="bk-icon icon-order" @click="showDetail(props.row)"></i>
                                </div>
                            </template>
                        </bk-table-column>
                    </bk-table>
                </div>
                <div class="message-total" v-else>
                    <i class="bk-icon icon-dialogue"></i>
                    你好，你有{{data.length}}条未读消息
                </div>
                <template>
                    <bk-dialog v-model="showDialog" theme="primary" :mask-close="false" :header-position="'left'">
                        <span>{{detail}}</span>
                    </bk-dialog>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    import { bkTable, bkTableColumn, bkButton, bkDialog, bkSwitcher } from 'bk-magic-vue'

    export default {
        name: 'index',
        components: {
            bkTable,
            bkTableColumn,
            bkButton,
            bkDialog,
            bkSwitcher
        },
        data () {
            return {
                data: [
                    {
                        content: '1.你的“20181212112308”单据已通过',
                        date: '刚刚',
                        detail: '你的“20181212112308”单据已通过(刚刚)',
                        status: 'success'
                    },
                    {
                        content: '2.你的“20181212112308”单据被驳回',
                        date: '45分钟前',
                        detail: '你的“20181212112308”单据已通过(45分钟前)',
                        status: 'success'
                    },
                    {
                        content: '3.你的“20181212112308”单据部分被驳回',
                        date: '3天前',
                        detail: '你的“20181212112308”单据已通过(3天前)',
                        status: 'false'
                    }
                ],
                tableShow: false,
                detail: '',
                showDialog: false

            }
        },
        methods: {
            showDetail (row) {
                this.showDialog = true
                this.detail = row.detail
            },
            changeStatus () {
                this.tableShow = !this.tableShow
            }
        }

    }

</script>

<style scoped>
.head-title{
    position: absolute;
    font-weight: bold;
    left: 60px;
    top: 50px;
}
.head-search{
    display: flex;
    margin-left: 35px;
    margin-top: 70px;
}
.message-area{
    margin: 15px auto;
    height: auto;
    border: 1px solid #dfe0e5;
    width: 95%;
}
.message-area-title{
    display: flex;
    border-bottom: 1px solid #dfe0e5;
    font-weight: bold;
    height: 42px;
    padding: 10px;
    background-color: #f5f7fa;
}
.message-area-title span{
    width: 97%;
}
.icon-dialogue,.icon-order{
    color: #2d8cf0;
    margin-right: 10px;
}
.message-total{
    height: 50px;
    line-height: 50px;
    text-align: center;
}

</style>
